<template>
     <el-dialog
        :model-value="innerVisible"
        append-to-body
        title="选择你要用的公司"
      >
      <div class="cplist">
        <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="公司id" width="180" />
    <el-table-column prop="name" label="公司名称" width="180" />
    <el-table-column prop="areaid" label="公司所在区域">
      <template #default="{ row }">
          {{ formatArea(row.areaid) }}
        </template>
    </el-table-column>
    <el-table-column prop="isVue" label="是否使用vue">
      <template #default="scope">
       {{ scope.row.isVue ? '是':'否' }}
      </template>
    </el-table-column>
    <el-table-column prop="isReact" label="是否使用React">
      <template #default="scope">
       {{ scope.row.isReact ? '是':'否' }}
      </template>
    </el-table-column>
  </el-table>
      </div>
      <el-pagination
        small
        background
        layout="prev, pager, next,sizes"
        :total="total"
        class="mt-4"
        :page-sizes="[5,10,30,50]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
      </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, reactive } from 'vue';

defineProps({
  innerVisible: {
    type: Boolean,
    default: false,
  },
});

const tableData = reactive([]);
</script>

<script lang="ts">
export default {
  name: 'companyPicker',
};
</script>

<style scoped lang="scss">

    .cplist{
        width: 500px;
        height: 400px;
    }

</style>
